<template>
  <div class="page-singinwinning">
    <div style="flex:1; overflow: hidden" class="content">
      <div class="title">
        <div>签到奖励</div>
        <div>获奖日期</div>
        <div>获奖来源</div>
      </div>
      <pull-to :bottom-load-method="loadmore" @bottom-state-change="stateChange">
        <ul>
          <li class="item" v-for="item in list">
            <div>{{item.awardDesc}}</div>
            <div>{{item.awardDate}}</div>
            <div>{{item.awardSource}}</div>
          </li>
        </ul>
        <!-- vue 2.5 use slot-scope -->
        <template slot="bottom-block" slot-scope="props">
          <div class="bottom-load-wrapper">
            {{ props.stateText }}
          </div>
        </template>
      </pull-to>
    </div>
  </div>

</template>

<script>
import PullTo from "vue-pull-to";
export default {
  components: {
    PullTo
  },
  data() {
    return {
      defaultpage: 1,
      list: []
    };
  },
  methods: {
    getlist() {
      this.$http
        .get(this.Interface.getsignin_award_list, {
          params: {
            sessionid: this.sessionid,
            pageNo: this.defaultpage,
            pageSize: 20
          }
        })
        .then(res => {
          if (res.data.success) {
            this.list = res.data.data.list;
            this.defaultpage++;
          }
        });
    },
    loadmore(loaded) {
      this.$http
        .get(this.Interface.getsignin_award_list, {
          params: {
            sessionid: this.sessionid,
            pageNo: this.defaultpage,
            pageSize: 20
          }
        })
        .then(res => {
          if (res.data.success) {
            this.list = this.list.concat(res.data.data.list || []);
            this.defaultpage++;
            loaded("done");
          }
        });
    },
    stateChange(state) {
      if (state === "pull" || state === "trigger") {
        this.iconLink = "#icon-arrow-bottom";
      } else if (state === "loading") {
        this.iconLink = "#icon-loading";
      } else if (state === "loaded-done") {
        this.iconLink = "#icon-finish";
      }
    }
  },
  created() {
    this.Uitis.getInfo().then(res => {
      if (res.uId == "") {
      } else {
        this.sessionid = res.sessionid;
        this.getlist();
      }
    });
  }
};
</script>

<style lang="less">
body {
  background: #fff;
}
.page-singinwinning {
  display: flex;
  flex: 1;
  height: 100%;
  background: url(../../public/imgs/siginin/singin_list_bg.png) no-repeat;
  background-size: cover;
  padding: 50px 30px;
  box-sizing: border-box;
  .content {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #fff;
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25px 60px;
      font-size: 30px;
      color: #be2b28;
    }
    .item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 55px;
      font-size: 24px;
      color: #ff4946;
    }
 
     .item:nth-child(even){
        background-color:#fffcf7;
    }
  }
}
</style>
